<template>
  <div class="">
    <sticky :class-name="'sub-navbar'">
      <el-button v-if="!isEdit" @click="showGuide">显示帮助</el-button>
      <el-button
        v-loading="loading"
        style="margin-left: 10px"
        type="success"
        @click="submitForm"
      >
        {{ isEdit ? "编辑商品" : "新增商品" }}
      </el-button>
    </sticky>
    <el-card>
      <el-form>
        <div class="detail-container">
          <el-row>
            <el-col :span="24">
              <ebook-upload
                :file-list="fileList"
                :disabled="isEdit"
                @onSuccess="onUploadSuccess"
                @onRemove="onUploadRemove"
              />
            </el-col>
            <el-col :span="24">
              <el-form-item prop="title"> 商品信息：必填项 </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="名称: " :label-width="labelWidth">
                    <el-input
                      v-model="postForm.productName"
                      placeholder="名称"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="图片链接: " :label-width="labelWidth">
                    <el-input
                      v-model="postForm.productImage"
                      placeholder="图片链接"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="价格：" :label-width="labelWidth">
                    <el-input v-model="postForm.salePrice" placeholder="价格" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="ID: " :label-width="labelWidth">
                    <el-input v-model="postForm.productId" placeholder="ID" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="库存: " :label-width="labelWidth">
                    <el-input v-model="postForm.productNum" placeholder="库存" />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="商品介绍: " :label-width="labelWidth">
                    <el-input
                      v-model="postForm.presentation"
                      placeholder="商品介绍"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="margin-left: 50px">
                <el-col :span="12">
                  <el-radio-group v-model="postForm.isDirect">
                    <el-radio label="直营">直营</el-radio>
                    <el-radio label="非直营">非直营</el-radio>
                  </el-radio-group>
                </el-col>
                <el-col :span="12">
                  <el-radio-group v-model="postForm.isHave">
                    <el-radio label="有货">有货</el-radio>
                    <el-radio label="缺货">缺货</el-radio>
                  </el-radio-group>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-form>
        <el-form-item prop="title">商品详情图片：选填项</el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="图片链接: " :label-width="labelWidth">
              <el-input
                v-model="prouctDetailImgs1"
                placeholder="图片链接"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图片链接: " :label-width="labelWidth">
              <el-input v-model="prouctDetailImgs2" placeholder="图片链接" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="图片链接: " :label-width="labelWidth">
              <el-input v-model="prouctDetailImgs3" placeholder="图片链接" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-form>
        <el-form-item prop="title">商品轮播图片：选填项</el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="图片链接: " :label-width="labelWidth">
              <el-input
                v-model="swiperImgs1"
                placeholder="图片链接"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图片链接: " :label-width="labelWidth">
              <el-input v-model="swiperImgs2" placeholder="图片链接" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="图片链接: " :label-width="labelWidth">
              <el-input v-model="swiperImgs3" placeholder="图片链接" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Sticky from '../../../components/Sticky/index'
import EbookUpload from '../../../components/EbookUpload/index.vue'
import { addGoods } from '../../../api/user'
export default {
  components: { Sticky, EbookUpload },
  props: {
    isEdit: Boolean
  },
  data() {
    return {
      loading: false,
      fileList: [],
      postForm: {
        productName: '',
        salePrice: null,
        productId: '',
        productImage: '',
        presentation: '',
        isDirect: null,
        isHave: null,
        productNum: null,
        prouctDetailImgs: [],
        swiperImgs: []
      },
      labelWidth: '100px',
      prouctDetailImgs1: '',
      prouctDetailImgs2: '',
      prouctDetailImgs3: '',
      swiperImgs1: '',
      swiperImgs2: '',
      swiperImgs3: ''
    }
  },
  methods: {
    showGuide() {
      console.log('showGuide')
    },
    submitForm() {
      this.loading = true
      this.postForm.prouctDetailImgs = this.pushProuctDetailImgs(this.prouctDetailImgs1, this.prouctDetailImgs2, this.prouctDetailImgs3)
      console.log(this.swiperImgs1)
      this.postForm.swiperImgs = this.pushSwiperImgs(this.swiperImgs1, this.swiperImgs2, this.swiperImgs3)
      addGoods(this.postForm).then((res) => {
        if (res.code === 0) {
          this.loading = false
          this.$message({
            type: 'success',
            message: '创建成功'
          })
        }
      })
    },
    onUploadSuccess(data) {
      console.log('onUploadSuccess', data)
    },
    onUploadRemove() {
      console.log('onUploadRemove')
    },
    pushProuctDetailImgs(r1, r2, r3) {
      const imgsArray = []
      if (r1) {
        imgsArray.push(r1)
      }
      if (r2) {
        imgsArray.push(r2)
      }
      if (r3) {
        imgsArray.push(r3)
      }
      return imgsArray
    },
    pushSwiperImgs(r1, r2, r3) {
      const imgsArray = []
      if (r1) {
        imgsArray.push(r1)
      }
      if (r2) {
        imgsArray.push(r2)
      }
      if (r3) {
        imgsArray.push(r3)
      }
      return imgsArray
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-container {
  pad: 40px 50px 40px;
  .preview-img {
    width: 200px;
    height: 270px;
  }
}
</style>
